<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <style>
        button{
            width: 80px;
            height: 30px;
        }
        button.active{
            background-color: #dceb49;
        }
        div{
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            display: none;
        }
    </style>
    <script>
        /*
         全局变量就是属性
         函数就是方法
         Onload中创建对象
         改this指向问题(事件或是定时器等，尽量让面向对象中的this指向对象)
         * */
        window.onload = function () {
            var t1 = new Tab()
            t1.init()
        }
        function Tab() {
            this.aBtn = document.querySelectorAll("button")
            this.aDiv = document.querySelectorAll("div")
        }
        Tab.prototype.init = function () {
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].index = i;
                var This = this;
                this.aBtn[i].onclick = function () {
                    This.func(this)
                };
            }
        }
        Tab.prototype.func = function(me){
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].className = "";
                this.aDiv[i].style.display = "none"
            }
            me.className = "active";
            this.aDiv[me.index].style.display = "block"
        }
    </script>
</head>
<body>

<button class="active">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<div style="display: block">000001</div>
<div>000002</div>
<div>000003</div>

</body>
</html>
</body>
</html>